<template>
    <div class="content">
        <div class="c-box" v-show="swiperData != {} && topList != {}">
            <div class="left">
                <div class="box">
                    <swiper ref="mySwiper"
                            :options="swiperOptions"
                            @swiper="onSwiper"
                            @click="swiperClick"
                            @slideChange="onSlideChange" style="height: 380px">
                        <swiper-slide v-for="item in swiperData.contents" :key="item.id"
                                      :data-id="item.id" :data-type="item.type">
                            <div class="swiper-tit">{{ item.title }}</div>
                            <img :src="'http://156.6.10.253:8080/admin' + item.cover ">
                        </swiper-slide>
                    </swiper>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
            <div class="right">
                <div class="news-text">
                    <h3 @click="toContent(topHead.id, topHead.type)" class="movehover" style="color: #f50000;font-size: 22px;">{{ topHead.title }}</h3>
                    <p style="font-size: 14px;display: inline-block;min-height: 50px;">&emsp;&emsp;{{ topHead.description }}</p>
                </div>
                <div class="news-li" style="min-height: 252px;">
                    <ul>
                        <li v-for="item in topList" key="id" @click="toContent(item.id, item.type)" class="movehover">
                            <span class="datetime">{{moment(item.createTime).format('YYYY-MM-DD')}}</span>{{ item.title | ellipsis}}
                        </li>
                    </ul>
                </div>
                <div>
                    <div style="display: inline-block;width: 10%;float:right;margin-top:5px;color: #f50000;text-align: right;margin-right: 5px;font-weight: 600">
                        <div @click="navigateToList('1405728732211052544')" class="movehover">更多>></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新闻动态 -->
        <div class="news-box" v-show="work != {}">
            <div class="news-tit" style="background-color: white">
                <span @click="navigateToList('1405732217694453760')" class="movehover" style="color: #f50000;font-weight: 600">更多>></span>
                <span style="text-align: center;height: 0;padding-left: 20px;padding-right: 20px;border-bottom: 38px solid #f50000;border-right: 18px solid transparent;float:left;font-weight: 600">{{ work.title }}</span>
            </div>
            <div class="news-li news-one" style="border-top: 1px solid #f50000;margin-top: 0;">
                <ul>
                    <li v-for="item in work.contents" key="id" @click="toContent(item.id, item.type)" class="movehover">
                        <span class="datetime">{{moment(item.createTime).format('YYYY-MM-DD')}}</span>{{ item.title | ellipsis }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="news-box" style="margin-left: 8px;" v-show="notice != {}">
            <div class="news-tit" style="background-color: white">
                <span @click="navigateToList('1405732272543367168')" class="movehover" style="color: #f50000;font-weight: 600">更多>></span>
                <span style="text-align: center;height: 0;padding-left: 20px;padding-right: 20px;border-bottom: 38px solid #f50000;border-right: 18px solid transparent;float:left;font-weight: 600">{{ notice.title }}</span>
            </div>
            <div class="news-li news-one" style="border-top: 1px solid #f50000;margin-top: 0;">
                <ul>
                    <li v-for="item in notice.contents" key="id" @click="toContent(item.id, item.type)" class="movehover">
                        <span class="datetime">{{moment(item.createTime).format('YYYY-MM-DD')}}</span>{{ item.title | ellipsis}}
                    </li>
                </ul>
            </div>
        </div>
        <!-- 专栏图 -->
        <div class="zt-pic" v-show="topic != {}">
            <div class="news-tit" style="background-color: white;border-bottom: 1px solid #f50000;margin-left: 10px;margin-right: 10px;padding: 0;">
                <span @click="navigateToList('1405732324212998144')" class="movehover" style="color: #f50000;font-weight: 600">更多>></span>
                <span style="text-align: center;height: 0;padding-left: 20px;padding-right: 20px;border-bottom: 38px solid #f50000;border-right: 18px solid transparent;float:left;font-weight: 600">{{ topic.title }}</span>
            </div>
            <div class="picc" style="margin-top: 0;">
                <ul>
                    <li v-for="item in topic.children" :key="item.id" @click="navigateToList(item.id)" class="movehover"><img
                        :src="'http://156.6.10.253:8080/admin' + item.cover">
                    </li>
                </ul>
            </div>
        </div>

        <div class="news-box">
            <div class="news-tit" style="background-color: white">
                <span @click="navigateToList('1405732373936472064')" class="movehover" style="color: #f50000;font-weight: 600">更多>></span>
                <span style="text-align: center;height: 0;padding-left: 20px;padding-right: 20px;border-bottom: 38px solid #f50000;border-right: 18px solid transparent;float:left;font-weight: 600">{{ send.title }}</span>
            </div>
            <div class="news-li news-one" style="border-top: 1px solid #f50000;margin-top: 0;">
                <ul>
                    <li v-for="item in send.contents" key="id" @click="toContent(item.id, item.type)" class="movehover">
                        <span class="datetime">{{ moment(item.createTime).format('YYYY-MM-DD')}}</span>{{ item.title | ellipsis}}
                    </li>
                </ul>
            </div>
        </div>
        <div class="news-box" style="margin-left: 8px;">
            <div class="news-tit" style="background-color: white">
                <span @click="navigateToList('1405732418219933696')" class="movehover" style="color: #f50000;font-weight: 600">更多>></span>
                <span style="text-align: center;height: 0;padding-left: 20px;padding-right: 20px;border-bottom: 38px solid #f50000;border-right: 18px solid transparent;float:left;font-weight: 600">{{ base.title }}</span>
            </div>
            <div class="news-li news-one" style="border-top: 1px solid #f50000;margin-top: 0;">
                <ul>
                    <li v-for="item in base.contents" key="id" @click="toContent(item.id, item.type)" class="movehover">
                        <span class="datetime">{{moment(item.createTime).format('YYYY-MM-DD')}}</span>{{ item.title | ellipsis }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="news-box">
            <div class="news-tit" style="background-color: white">
                <span @click="navigateToList('1405732481058996224')" class="movehover" style="color: #f50000;font-weight: 600">更多>></span>
                <span style="text-align: center;height: 0;padding-left: 20px;padding-right: 20px;border-bottom: 38px solid #f50000;border-right: 18px solid transparent;float:left;font-weight: 600">{{ hot.title }}</span>
            </div>
            <div class="news-li news-one" style="border-top: 1px solid #f50000;margin-top: 0;">
                <ul>
                    <li v-for="item in hot.contents" key="id" @click="toContent(item.id, item.type)" class="movehover">
                        <span class="datetime">{{moment(item.createTime).format('YYYY-MM-DD')}}</span>{{ item.title | ellipsis}}
                    </li>
                </ul>
            </div>
        </div>
        <div class="news-box" style="margin-left: 8px;">
            <div class="news-tit" style="background-color: white">
                <span @click="navigateToList('1405732532053344256')" class="movehover" style="color: #f50000;font-weight: 600">更多>></span>
                <span style="text-align: center;height: 0;padding-left: 20px;padding-right: 20px;border-bottom: 38px solid #f50000;border-right: 18px solid transparent;float:left;font-weight: 600">{{ note.title }}</span>
            </div>
            <div class="news-li news-one" style="border-top: 1px solid #f50000;margin-top: 0;">
                <ul>
                    <li v-for="item in note.contents" key="id" @click="toContent(item.id, item.type)" class="movehover">
                        <span class="datetime">{{ moment(item.createTime).format('YYYY-MM-DD')}}</span>{{ item.title | ellipsis}}
                    </li>
                </ul>
            </div>
        </div>

        <!-- 排行 -->
        <div class="ph-box">
            <div class="news-tit" style="background-color: white;">
                <ul class="tab-tilte">
                    <span style="float: right;color: #f50000;" @click="navigateToPublish" class="movehover" v-if="num==0">更多>></span>
                    <span style="float: right;color: #f50000;" @click="navigateToVisit" class="movehover" v-if="num==1">更多>></span>
                    <span style="float: right;color: #f50000;" @click="navigateToHot" class="movehover" v-if="num==2">更多>></span>
                    <li @click="num=0" :class="{active:num===0}" style="text-align: center;height: 0;padding-left: 20px;border-bottom: 38px solid #f50000;border-right: 18px solid transparent;font-weight: 600">发布排行</li>
                    <li @click="num=1" :class="{active:num===1}" style="text-align: center;height: 0;padding-left: 20px;border-bottom: 38px solid #f50000;border-right: 18px solid transparent;font-weight: 600;margin-left: 10px;">访问排名</li>
                    <li @click="num=2" :class="{active:num===2}" style="text-align: center;height: 0;padding-left: 20px;border-bottom: 38px solid #f50000;border-right: 18px solid transparent;font-weight: 600;margin-left: 10px;">热点稿件排名</li>
                </ul>
            </div>
            <div class="news-li news-one" style="border-top: 1px solid #f50000;margin-top: 0;">
                <div v-show="num===0">
                    <div class="Ranking-box" v-for="(item, index) in publishStatistics" :key="index">
                        <div class="Ranking-title">{{ item.belongName }}</div>
                        <div class="Ranking-txt">
                            <ul>
                                <li v-for="(info, infoIndex) in item.departList" v-if="infoIndex < 4" @click="navigateToDepartContentList(info.id, info.name)" style="cursor:pointer;"> {{ info.name }}
                                    ({{ info.count }})
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div v-show="num===1">
                    <div class="Ranking-box" v-for="(item, index) in visitStatistics" :key="index" v-if="item.departList.length > 0">
                        <div class="Ranking-title">{{ item.belongName }}</div>
                        <div class="Ranking-txt">
                            <ul>
                                <li v-for="(info, infoIndex) in item.departList" v-if="infoIndex < 4">
                                    {{ info.name }}
                                    ({{ info.count }})
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div v-show="num===2">
                    <ul class="visit-tit">
                        <li class="visit-title">标题</li>
                        <li class="visit-time">发布时间</li>
                        <li class="visit-source">发布人</li>
                        <li class="visit-count">浏览次数</li>
                    </ul>
                    <ul class="visit-txt-box">
                        <li v-for="item in hotStatistics" :key="item.id" @click="toContent(item.id, item.type)">
                            <span class="visit visit-title">{{ item.title | ellipsis(32) }}</span>
                            <span class="visit visit-time">{{ moment(item.createTime).format('YYYY-MM-DD')}}</span>
                            <span class="visit visit-source">{{ item.belongName + ' -- ' + item.departName }}</span>
                            <span class="visit visit-count">{{ item.count }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--网站图片广告    -->
        <div class="pic-box" style="margin-bottom: 0">
            <div class="news-tit" style="background-color: white;">
                <ul>
                    <li @click="cur=0" :class="{active:cur==0}" style="text-align: center;height: 0;padding-left: 20px;border-bottom: 38px solid #f50000;border-right: 18px solid transparent;padding-right: 15px;font-weight: 600">重要网站</li>
                    <li @click="cur=1" :class="{active:cur==1}" style="text-align: center;height: 0;padding-left: 20px;border-bottom: 38px solid #f50000;border-right: 18px solid transparent;padding-right: 15px;font-weight: 600;margin-left: 10px;">全国网站</li>
                </ul>
            </div>
            <div class="wzpic-li" style="border-top: 1px solid #f50000;margin-top: 0;margin-left: 10px;margin-right: 10px;">
                <ul v-if="cur==0">
<!--                    <li v-for="item in important.children" :key="item.id"><a :href="item.webUrl">{{item.title}}</a></li>-->
                    <li v-for="item in important.children" :key="item.id" style="width: 30%;display: inline-block;margin: 5px 1.5%;"><a :href="item.webUrl"><img :src="'http://156.6.10.253:8080/admin' + item.cover"></a></li>
                </ul>
                <ul v-if="cur==1" style="padding: 10px 0.5%;">
<!--                    <li v-for="item in globalWeb.children" :key="item.id" @click="navigateToList(item.id)"><img :src="'http://156.6.10.253:8080/admin' + item.cover"></li>-->
                    <li v-for="item in globalWeb.children" :key="item.id"><a target="_blank" :href="item.webUrl">{{item.title}}</a></li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import '../../static/css/css.css';
import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
import SwiperCore, {Autoplay, Navigation} from 'swiper';
import headTemplate from "./headTemplate";
import request from "@/utils/request";
import moment from "moment";

SwiperCore.use([Navigation, Autoplay])
export default {
    name: '',
    filters: {
        ellipsis(value, num) {
            if (!value) return ''
            if (num == NaN || num == undefined) num = 24
            if (value.length > num) {
                return value.slice(0, num) + '...'
            }
            return value
        }
    },
    components: {
        Swiper,
        SwiperSlide,
        headTemplate
    },
    data() {
        return {
            _this: this,
            num: 0,
            cur: 0,
            swiperOptions: {
                grabCursor: true,
                spaceBetween: 50,
                centeredSlides: true,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false
                },
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
            },
            swiperData: {},
            work: {},
            topic: {},
            note: {},
            globalWeb: {},
            base: {},
            notice: {},
            hot: {},
            send: {},
            important: {},
            top: {},
            topHead: {},
            topList: {},
            publishStatistics: [],
            visitStatistics: [],
            hotStatistics: []
        }
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.$swiper
        }
    },
    created() {
        this.getIndexContents()

        this.initVisit()
        this.initHot()

        this.getPublishStatistics()
    },
    mounted() {
        let _this = this;
        this.swiper.on('click', function () {
            const id = this.clickedSlide.dataset.id
            const type = this.clickedSlide.dataset.type
            _this.toContent(id, type)
        })
    },
    methods: {
        moment,
        initVisit() {
            this.getVisitStatistics(10, function (res, self) {
                self.visitStatistics = res.data.data
            })
        },
        initHot() {
            this.getHotStatisticsHots(5, function (res, self) {
                self.hotStatistics = res.data.data
            })
        },
        getPublishStatistics() {
            request({
                url: '/business/statisticsPublish',
                method: 'get'
            }).then((res) => {
                this.publishStatistics = res.data.data
            })
        },
        getVisitStatistics(limit, callback) {
            request({
                url: '/business/statisticsVisits/' + limit,
                method: 'get'
            }).then((res) => {
                callback(res, this)
            })
        },
        getHotStatisticsHots(limit, callback) {
            request({
                url: '/business/statisticsHots/' + limit,
                method: 'get'
            }).then((res) => {
                callback(res, this)
            })
        },
        getIndexContents() {
            request({
                url: '/business/getIndexContents',
                method: 'get'
            }).then((res) => {
                let categories = res.data.data
                categories.forEach(item => {
                    switch (item.id) {
                        case '1405728675059466240':
                            // 轮播图
                            this.swiperData = item
                            break;
                        case '1405728732211052544':
                            // 头条
                            let temp = JSON.parse(JSON.stringify(item))
                            this.top = temp
                            if (temp.contents.length > 0) {
                                this.topHead = temp.contents[0]
                                this.topList = temp.contents.splice(1)
                            }
                            break;
                        case '1405732217694453760':
                            // 工作动态
                            this.work = item
                            break;
                        case '1405732272543367168':
                            //通知公告
                            this.notice = item
                            break;
                        case '1405732324212998144':
                            // 专题专栏
                            this.topic = item
                            break;
                        case '1405732373936472064':
                            // 派驻工作
                            this.send = item
                            break;
                        case '1405732418219933696':
                            //基层动态
                            this.base = item
                            break;
                        case '1405732481058996224':
                            // 纪检热点直击
                            this.hot = item
                            break;
                        case '1405732532053344256':
                            // 记录审查
                            this.note = item
                            break;

                        case '1405732774685442048':
                            // 全国网站
                            this.globalWeb = item
                            break;
                        case '1405732743567900672':
                            // 重要站点
                            this.important = item
                            break;
                    }
                })
            })
        },
        onSwiper(swiper) {

        },
        onSlideChange() {

        },
        swiperClick() {

        },
        navigateToList(id) {
            let newR = this.$router.resolve({
                path: '/list', query: {
                    categoryId: id
                }
            })
            window.open(newR.href,'_blank')
        },
        navigateToDepartContentList(departId, departName) {
            let newR = this.$router.resolve({
                path: '/depart_publish_list', query: {
                    departId: departId,
                    departName: departName
                }
            })
            window.open(newR.href,'_blank')
        },
        toContent(id, type) {
            if (type == 1 || type == 4 || type == 5) {
                let newR = this.$router.resolve({
                    path: '/content', query: {
                        contentId: id
                    }
                })
                window.open(newR.href,'_blank')
            } else if (type == 2) {
                let newR = this.$router.resolve({
                    path: '/pdf', query: {
                        contentId: id
                    }
                })
                window.open(newR.href,'_blank')
            } else if (type == 3) {
                let newR = this.$router.resolve({
                    path: '/video_content', query: {
                        contentId: id
                    }
                })
                window.open(newR.href,'_blank')
            }
        },
        navigateToPublish() {
            let newR = this.$router.resolve({
                path: '/publish_statistics'
            })
            window.open(newR.href,'_blank')
        },
        navigateToVisit() {
            let newR = this.$router.resolve({
                path: '/visit_statistics'
            })
            window.open(newR.href,'_blank')
        },
        navigateToHot() {
            let newR = this.$router.resolve({
                path: '/hot_statistics'
            })
            window.open(newR.href,'_blank')
        }
    }
}
</script>
<style scoped>
.c-box {
    overflow: hidden;
    display: -webkit-inline-box;
}

.box {
    position: relative;
}

.left {
    width: 545px;
    height: 380px;
    float: left;
    margin: 20px;
}

.left img {
    width: 545px;
    height: 380px;
}

.swiper-button-next, .swiper-button-prev {
    color: white;
    background-color: rgba(0, 0, 0, .5);
    padding: 10px;
}

.swiper-tit {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .6);
    color: white;
    height: 38px;
    line-height: 38px;
    padding: 0 10px;
    font-weight: bold;
    font-size: 16px;
}

.right {
    margin-left: 10px;
    width: 595px;
}

.news-text h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 25px;
}

.news-text h3 a {
    color: #F50000;
    font-size: 20px;
}

.news-text p {
    color: #999999;
    line-height: 25px;
}

.news-text {
    border-bottom: 1px solid #cccccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.news-li ul {
    list-style: disc;
}

.news-li ul li {
    line-height: 36px;
    margin-left: 20px;
}

.news-li ul li a {
    color: #333333;
}

/*新闻动态样式*/
.news-box {
    overflow: hidden;
    border: 1px #CCCCCC solid;
    width: 588px;
    height: 280px;
    display: inline-block;
    margin-bottom: 10px;
}

.news-tit {
    background-color: #F50000;
    height: 38px;
    line-height: 38px;
    color: white;
    padding: 0 10px;
}

.news-tit span {
    float: right;
}

.news-tit ul li.active {
    color: #fff600
}

.news-one {
    margin: 10px;
}

/*专题专栏图*/
.zt-pic {
    margin-bottom: 10px;
    border: 1px #CCCCCC solid;
}

.picc {
    overflow: hidden;
    padding-bottom: 20px;
}

.picc ul li {
    float: left;
    margin-left: 20px;
    margin-top: 20px;
}

.picc ul li a {
    line-height: 1;
    font-size: 0;
    display: block;
}

.picc ul li img {
    position: relative;
    width: 372px;
    height: 120px;
}

.picc ul li img::after {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(/static/images/placeholderPic.png) no-repeat center;
}

.ph-box, .pic-box {
    border: 1px #CCCCCC solid;
    margin-bottom: 20px
}

.news-tit ul li{
    cursor: pointer;
}

.news-tit ul.tab-tilte li {
    float: left;
    padding-right: 15px;
    cursor: pointer;
}

.news-tit ul.tab-tilte li a {
    color: white;
}

.news-tit ul.tab-tilte li a.active {
    color: #fff600;
}

.news-tit ul li {
    display: inline-block;
}

.Ranking-box {
    width: 264px;
    margin: 5px;
    display: inline-block;
    padding: 10px;
    background-color: #f9f9f9;
}

.Ranking-title {
    text-align: center;
    line-height: 32px;
    color: #f50000;
    font-weight: bold;
}

.Ranking-txt ul {
    list-style: none;
}

.Ranking-txt ul li {
    background-color: #FFFFFF;
    margin-left: 0;
    padding: 0 10px;
    margin-bottom: 10px;
    margin-top: 5px;
    text-align: center;
}


.wzpic-li {
    min-height: 85px;
    cursor: pointer;
}

.wzpic-li ul {
    line-height: 1;
    font-size: 0;
    /*display: flex;*/
    padding: 10px 0;
}

.wzpic-li ul li {
    /*width: 300px;*/
    display: inline-block;
    line-height: 1;
    font-size: 16px;
    margin: 10px 10px;
    cursor: pointer;
}

.wzpic-li ul li a img {
    width: 100%;
    height: auto;
    border: 1px #CCCCCC solid;
}

.visit-txt-box li{
    display: inline-flex;
    margin-left: 0px !important;
    line-height: 45px !important;
}
.visit-tit{
    background-color: #f9f9f9;
    display: inline-table;
    text-align: center;
}
.visit-tit li{
    display: inline-block;
    line-height: 45px !important;
    margin-left: 0 !important;
    border-right: 1px #FFFFFF solid;
}
.visit-title {
   width: 580px;
}

.visit-time {
    text-align: center;
    width: 179px;
}

.visit-source {
    text-align: center;
    width: 290px;
}

.visit-count {
    text-align: center;
    width: 100px;
}
</style>
